<template>
	<div v-if="posterImageStatus" class="poster-first">
		<!--    <canvas style="width:747px;height:1326px" canvas-id="myCanvas"></canvas>-->
		<!-- <div class="poster-pop" v-show="!canvasStatus">
      <img
        :src="$VUE_APP_RESOURCES_URL+'/images/poster-close.png'"
        class="close"
        @click="posterImageClose"
      />
      <div class="canvas" ref="poster">
        <img class="image" :src="posterData.image" alt="商品图片" />
        <div class="text black">
          <span v-text="posterData.title"></span>
        </div>
        <div class="text rad">
          <span v-text="'￥' + posterData.price"></span>
        </div>
        <div class="code">
          <div class="code-img">
            <img :src="posterData.code" show-menu-by-longpress mode="widthFix" alt="二维码" />
          </div>
          <div class="code-text">
            <span>长按识别二维码 立即购买</span>
          </div>
        </div>
      </div>
      <div class="save-poster" @click="savePosterPath">生成图片</div>
    </div> -->
		<!--    <div class="poster-pop" v-show="canvasStatus">-->
		<!--      <img-->
		<!--        :src="$VUE_APP_RESOURCES_URL+'/images/poster-close.png'"-->
		<!--        class="close"-->
		<!--        @click="posterImageClose"-->
		<!--        mode="widthFix"-->
		<!--      />-->
		<!--      <img :src="posterImage" alt="tp" class="poster-image" show-menu-by-longpress mode="widthFix" />-->
		<!--      <div class="keep">长按图片可以保存到手机</div>-->
		<!--    </div>-->
		<div class="mask" @tap="posterImageClose" v-show="canvasStatus">
			<div class="icon-box">
				<img @click.stop="posterImageClose" class="icon" src="https://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/client/static/zymall/dx2x.png">
			</div>
			<img class="img" @click.stop :src="posterImage" mode="widthFix" show-menu-by-longpress />
			<!-- <div class="button" @click.stop="saveImg">保存海报</div> -->
		</div>
	</div>
</template>

<script>
	// import html2canvas from "html2canvas";
	import {
		PosterCanvas
	} from "@/utils";

	export default {
		name: "StorePoster",
		props: {
			posterImageStatus: Boolean,
			posterData: {
				type: Object,
				default: () => {}
			}
		},
		data: function() {
			return {
				canvasStatus: false,
				posterImage: ""
			};
		},
		watch: {
			posterImageStatus: function() {
				if (this.posterImageStatus === true) {
					/*that.$nextTick(function() {
					  that.savePosterPath();
					});*/
					this.$nextTick(function() {
						this.posterImage = this.posterData.codePath;
						this.canvasStatus = true;
					});

				}
			}
		},
		beforeMount: function() {
			this.canvasStatus = false;
			this.posterData = {};
			this.$forceUpdate()
		},
		mounted: function() {
			// this.canvasStatus = false;
			// this.posterData = [];
			// this.$forceUpdate()
		},
		methods: {
			posterImageClose: function() {
				this.posterImageStatus = false;
				this.canvasStatus = false;
				this.$emit("setPosterImageStatus");
			},
			savePosterPath: function() {
				PosterCanvas(this.posterData, posterImage => {
					this.canvasStatus = true;
					this.posterImage = posterImage;
				});
			},
			// 保存海报
			saveImg: function() {
				this.downloadImage(
					this.posterImage,
					"poster"
				);
			},
			downloadImage: function(imgsrc, name) {
				var that = this;
				this.isDown = true;
				var downloadUrl = imgsrc;

				if (!wx.saveImageToPhotosAlbum) {
					wx.showModal({
						title: "提示",
						content: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。"
					});
					that.openDialogVisible = true;
					return;
				}

				// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope
				wx.getSetting({
					success(res) {
						if (!res.authSetting["scope.writePhotosAlbum"]) {
							that.openDialogVisible = true;

							// 接口调用询问
							wx.authorize({
								scope: "scope.writePhotosAlbum",
								success() {
									that.saveShareImage(downloadUrl);
								},
								fail() {
									// 用户拒绝了授权
									// 打开设置页面
									wx.openSetting({
										success: function(data) {},
										fail: function(data) {}
									});
								}
							});
						} else {
							that.saveShareImage(downloadUrl);
						}
					},
					fail(res) {
						that.openDialogVisible = true;
					}
				});
			},
			saveShareImage(imageUrl) {
				wx.downloadFile({
					url: imageUrl, //仅为示例，并非真实的资源
					success: function(res) {
						if (res.statusCode === 200) {
							wx.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function(res) {
									wx.showToast({
										title: '保存成功！',
										duration: 1500
									})
								},
								fail: function(res) {
									wx.showToast({
										title: "保存失败",
										icon: 'none',
									})
								},
								complete: function(res) {}
							})
						} else {
							console.log(res)
						}
					},
					fail: function(res) {
						console.log(res)
						wx.hideToast()
					},
					complete: function() {}
				})
			},
		}
	};
</script>

<style lang="less" scoped>
	.mask {
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.8);
		width: 100vw;
		height: 95vh;
		padding-bottom: 5vh;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.icon-box {
			width: 560rpx;
			height: 100rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.icon {
				height: 60rpx;
				width: 60rpx;
			}
		}

		.img {
			width: 600rpx;
			height: 824rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
		}

		.button {
			width: 460rpx;
			height: 86rpx;
			border-radius: 43rpx;
			background-color: #F84A24;
			font-size: 32rpx;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;
		}

		.button::after {
			border: none;
		}
	}
</style>